<template>
  <!-- 综合 -->
  <div class="fuse">
    <div class="fuse-left-side">
      <div class="fuse-side_top" :style="Img" style="height: 1.8rem">
        <div class="fuse-title">
          <img
            style="width: 0.4rem; margin-left: -0.1rem; vertical-align: middle"
            src="../../../assets/images/img10.png"
            alt=""
          /><span style="vertical-align: middle">井下人员实时统计</span>
        </div>
        <div class="fuse-main">
          <ul class="fuse-left-side_person">
            <li @click="personnumList">
              <img src="@/assets/images/img8.png" />
              <span>井下人员：</span
              ><span>{{ this.CompositeData.personnum }}</span>
            </li>
            <!-- <li>
            <span>值班领导：</span
            ><span style="width: auto">{{
              this.CompositeData.dutyLeader
            }}</span>
            <i
              class="el-icon-edit"
              style="margin-left: 20px; font-size: 22px"
              @click="addleader"
            ></i>
          </li> -->
            <li>
              <img src="@/assets/images/img7.png" />
              <span>带班领导：</span
              ><span style="width: auto" @click="tapleader">{{
                this.CompositeData.classLeader
              }}</span>
            </li>
          </ul>
        </div>
      </div>
      <div
        class="border fuse-side_middle"
        style="flex: none; height: 3.5rem !important"
      >
        <div class="fuse-title">
          <img
            style="width: 0.4rem; margin-left: -0.1rem; vertical-align: middle"
            src="../../../assets/images/img4.png"
            alt=""
          /><span style="vertical-align: middle">安全报警管理</span
          ><i class="iconfont" @click="getpoliceDetail">&#xe66e;</i>
        </div>
        <div class="fuse-main">
          <echarts :chartData="echartData.Safe"></echarts>
        </div>
      </div>
      <div class="border fuse-side_bom">
        <div class="fuse-title">
          <img
            style="width: 0.4rem; margin-left: -0.1rem; vertical-align: middle"
            src="../../../assets/images/img10.png"
            alt=""
          /><span style="vertical-align: middle">子系统上传情况</span>
        </div>
        <div class="fuse-main" style="padding: 0.1rem">
          <!-- <dispatch-detail></dispatch-detail> -->
          <!-- <ul class="transfer">
            <li v-for="(item, index) in transferlist" :key="index">
              <dl>
                <dt>
                  <h1 :class="item.transferState == '中断' ? 'isred' : ''">
                    {{ item.transferState }}
                  </h1>
                  <p>{{ item.type }}监测</p>
                </dt>
                <dd>
                  <h2>{{ item.lastTime }}</h2>
                </dd>
              </dl>
            </li>
          </ul> -->
          <ul class="transferlist">
            <li v-for="(item, index) in transferlist" :key="index">
              <p>
                <span
                  :class="
                    item.transferState == '中断'
                      ? 'isgroundred'
                      : item.transferState == '暂未接入'
                      ? ''
                      : 'isgroundgreen'
                  "
                ></span>
                <span
                  :class="
                    item.transferState == '中断'
                      ? 'isred'
                      : item.transferState == '暂未接入'
                      ? ''
                      : 'isgreen'
                  "
                >
                  {{ item.transferState }}
                </span>
              </p>
              <h1
                :class="
                  item.transferState == '中断'
                    ? 'isred'
                    : item.transferState == '暂未接入'
                    ? ''
                    : 'isgreen'
                "
              >
                <i class="iconfont" v-if="item.type == '安全监控'">&#xe62d;</i>
                <i class="iconfont" v-if="item.type == '人员定位'">&#xe7e6;</i>
                <i class="iconfont" v-if="item.type == '产量监测'">&#xe60a;</i>
              </h1>
              <h2
                :class="
                  item.transferState == '中断'
                    ? 'isred'
                    : item.transferState == '暂未接入'
                    ? ''
                    : 'isgreen'
                "
              >
                {{ item.type }}
              </h2>
            </li>
            <li class="isgreen">
              <p><span class="isgroundgreen"></span><span>在线</span></p>
              <h1>
                <i class="iconfont">&#xe654;</i>
              </h1>
              <h2>视频监控</h2>
            </li>
            <li>
              <p><span></span><span>暂未接入</span></p>
              <h1>
                <i class="iconfont">&#xe6d2;</i>
              </h1>
              <h2>水害防治</h2>
            </li>
            <li>
              <p><span></span><span>暂未接入</span></p>
              <h1>
                <i class="iconfont">&#xf70f;</i>
              </h1>
              <h2>供电系统</h2>
            </li>
            <li>
              <p><span></span><span>暂未接入</span></p>
              <h1>
                <i class="iconfont">&#xe63a;</i>
              </h1>
              <h2>主通风系统</h2>
            </li>
            <li>
              <p><span></span><span>暂未接入</span></p>
              <h1>
                <i class="iconfont">&#xe63f;</i>
              </h1>
              <h2>主排水系统</h2>
            </li>
            <li>
              <p><span></span><span>暂未接入</span></p>
              <h1>
                <i class="iconfont">&#xe61d;</i>
              </h1>
              <h2>压风系统</h2>
            </li>
            <li>
              <p><span></span><span>暂未接入</span></p>
              <h1>
                <i class="iconfont">&#xe89d;</i>
              </h1>
              <h2>提升机系统</h2>
            </li>
            <li>
              <p><span></span><span>暂未接入</span></p>
              <h1>
                <i class="iconfont">&#xe651;</i>
              </h1>
              <h2>主运皮带监控</h2>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="fuse-middle-side">
      <ul class="fuse-census">
        <li style="cursor: pointer">
          <p >
            <span @click="getsafe">安全报警：</span >
            <span @click="SafeRealAlarm">{{ this.CompositeData.alarmNum }}</span>
          </p>
          <ol>
            <li @click="lastDayAlarm">
              昨日：<span>{{ this.CompositeData.lastDayAlarmNum }}</span>
            </li>
            <li @click="allAlarm">
              累计：<span>{{ this.CompositeData.allAlarmNum }}</span>
            </li>
          </ol>
        </li>
        <li @click="AIpoliceList" style="cursor: pointer">
          <!--  @click="open3" -->
          <p>
            <span>设备报警：</span><span><span>无数据</span></span>
          </p>
          <ol>
            <li>昨日：<span>-</span></li>
            <li>累计：<span>-</span></li>
          </ol>
        </li>

        <!-- <li @click="troubleList" style="cursor: pointer">
          <p>
            <span>安全隐患：</span><span>{{ this.CompositeData.hdCountAll }}</span>
          </p>
          <ol>
            <li>
              昨日：<span>{{ this.CompositeData.hdCount1 }}</span>
            </li>
            <li>
              今日：<span>{{ this.CompositeData.hdCount2 }}</span>
            </li>
          </ol>
        </li> -->
        <!-- <li @click="AIpoliceList" style="cursor: pointer">
          <p>
            <span>AI报警：</span><span>{{ this.CompositeData.aiTotal }}</span>
          </p>
          <ol>
            <li>
              昨日：<span>{{ this.CompositeData.aiYesterdayCount }}</span>
            </li>
            <li>
              今日：<span>{{ this.CompositeData.aiNowCount }}</span>
            </li>
          </ol>
        </li> -->
        <li style="cursor: pointer">
          <p >
            <span @click="getrenyuan">
              人员报警：
              <!-- <router-link :to="{ name: 'Personnel' }">人员报警：</router-link> -->
              </span>
              <span @click="personpolice">{{ this.CompositeData.realPsAlarmNum }}</span>
          </p>
          <ol>
            <li @click="lastDayPsAlarm">
              昨日：<span>{{ this.CompositeData.lastDayPsAlarmNum }}</span>
            </li>
            <li @click="allPsAlarm">
              累计：<span>{{ this.CompositeData.allPsAlarmNum }}</span>
            </li>
          </ol>
        </li>
        <li style="cursor: pointer">
          <p>
            <span @click="getYield">产量报警：</span
            ><span>{{ this.CompositeData.clAlarmNum }}</span>
          </p>
          <ol>
            <li>
              昨日：<span>{{ this.CompositeData.lastDayClAlarmNum }}</span>
            </li>
            <li>
              累计：<span>{{ this.CompositeData.allClAlarmNum }}</span>
            </li>
          </ol>
        </li>
        <li style="cursor: pointer">
          <p>
            <span @click="getvideo">视频报警：</span
            ><span><span>无数据</span></span>
          </p>
          <ol>
            <li>昨日：<span>-</span></li>
            <li>累计：<span>-</span></li>
          </ol>
        </li>
      </ul>
    </div>
    <div class="fuse-right-side">
      <div
        class="fuse-side_top"
        :style="Img"
        style="height: 2.5rem;position: relative;overflow:hidden"
      >
        <div class="fuse-title">
          <img
            style="width: 0.4rem; margin-left: -0.1rem; vertical-align: middle"
            src="../../../assets/images/img10.png"
            alt=""
          /><span style="vertical-align: middle">实时预报警数据</span>
        </div>
        <div class="fuse-main">
          <!-- M0101=甲烷   M0701=粉尘   M0104= 一氧化碳     M0201= 温度    M0103=二氧化碳 -->
          <!-- <ul class="fuse-left_person">
            <li v-for="(item, index) in ambient" :key="index">
              <p>
                <span
                  >{{
                    item.type == "M0101"
                      ? "甲烷"
                      : item.type == "M0701"
                      ? "粉尘浓度"
                      : item.type == "M0104"
                      ? "一氧化碳"
                      : item.type == "M0201"
                      ? "温度"
                      : item.type == "M0103"
                      ? "二氧化碳"
                      : item.type == "M0102"
                      ? "氧气"
                      : ""
                  }}:</span
                ><span>{{ item.value }}</span
                ><span>{{ item.company }}</span>
              </p>
            </li>
          </ul> -->
          <!-- <ul class="fuse-left-side_person">
          <li @click="personpolice">
            <span>当前人员报警总数：</span
            ><span>{{ this.CompositeData.realPsAlarmNum }}</span>
          </li>
          <li>
            <span>求救报警：</span>
            <span @click="staffAlarm(8)">{{
              this.CompositeData.psHelpNum
            }}</span>
            <span>超时：</span>
            <span @click="staffAlarm(7)">{{
              this.CompositeData.psOverTimeNum
            }}</span>
          </li>
          <li>
            <span>超员：</span>
            <span @click="staffAlarm(5)">{{
              this.CompositeData.psOverManNum
            }}</span>
            <span>限制区域：</span>
            <span @click="staffAlarm(6)">{{
              this.CompositeData.psRestrictedAreaNum
            }}</span>
          </li>
        </ul> -->
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="安全报警" name="first">
              <vue-seamless-scroll
                :data="listData"
                class="seamless-warp"
                :class-option="classOption"
              >
                <ul class="item">
                  <li v-for="(item, index) in listData" :key="index">
                    <el-tooltip
                      class="item"
                      effect="dark"
                      :content="item.alarmDetail"
                      placement="right"
                      ><span class="text" v-text="item.alarmDetail"></span
                    ></el-tooltip>
                    <span class="date" v-text="item.ssAlarmStime"></span>
                    <span @click="getdetail(item)">详情</span>
                  </li>
                </ul>
              </vue-seamless-scroll>
              <h1 class="linkage" v-show="linkageShow"><i class="iconfont icon-guanbi" @click="gethidden"></i><span>{{ linkage }}</span></h1>
            </el-tab-pane>
            <el-tab-pane label="人员报警" name="second">
              <vue-seamless-scroll
                :data="staffData"
                class="seamless-warp"
                :class-option="classOption"
              >
                <ul class="item">
                  <li v-for="(item, index) in staffData" :key="index">
                    <el-tooltip
                      class="item"
                      effect="dark"
                      :content="item.alarmDetail"
                      placement="right"
                      ><span class="text" v-text="item.alarmDetail"></span
                    ></el-tooltip>
                    <span class="date" v-text="item.psAlarmStime"></span>
                  </li>
                </ul>
              </vue-seamless-scroll>
            </el-tab-pane>
            <el-tab-pane label="视频报警" name="third">
              <el-empty :image-size="50"></el-empty>
            </el-tab-pane>
            
            <el-tab-pane label="瓦斯预警" name="four">
              <vue-seamless-scroll
                :data="listData"
                class="seamless-warp"
                :class-option="classOption"
              >
                <ul class="item">
                  <li v-for="(item, index) in wasiAlarmList" :key="index">
                    <el-tooltip
                      class="item"
                      effect="dark"
                      :content="item.ssTransducerPoint"
                      placement="right"
                      ><span class="text" v-text="item.ssTransducerPoint"></span
                    ></el-tooltip>
                    <span class="date" v-text="item.csDataTime"></span>
                    <span @click="getdetail1(item)">详情</span>
                  </li>
                </ul>
              </vue-seamless-scroll>
              <h1 class="linkage" v-show="linkageShow1"><i class="iconfont icon-guanbi" @click="gethidden1"></i><span>{{ linkage }}</span></h1>
              <!-- <vue-seamless-scroll
                :data="staffData"
                class="seamless-warp"
                :class-option="classOption"
              >
                <ul class="item">
                  <li v-for="(item, index) in wasiAlarmList" :key="index">
                    <el-tooltip
                      class="item"
                      effect="dark"
                      :content="item.ssTransducerPoint"
                      placement="right"
                      ><span class="text" v-text="item.ssTransducerPoint"></span
                    ></el-tooltip>
                    <span class="date" v-text="item.ssTransducerValue" style="text-align: center;"></span>
                    <span class="date" v-text="item.csDataTime"></span>
                  </li>
                </ul>
              </vue-seamless-scroll> -->
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
      <div class="border fuse-side_middle">
        <div class="fuse-title">
          <img
            style="width: 0.4rem; margin-left: -0.1rem; vertical-align: middle"
            src="../../../assets/images/img10.png"
            alt=""
          /><span style="vertical-align: middle">调度值班信息</span>
        </div>
        <div class="fuse-main" style="padding: 0 0.05rem">
          <el-table :data="dutyData" height="2.8rem" class="backtable">
            <el-table-column label="序号" width="70" align="center">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.$index + 1 }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="classesName"
              label="班次"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column prop="name" label="姓名" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="duty" label="职务" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="time" label="值班时间" show-overflow-tooltip>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="border fuse-side_bom">
        <div class="fuse-title">
          <img
            style="width: 0.4rem; margin-left: -0.1rem; vertical-align: middle"
            src="../../../assets/images/img4.png"
            alt=""
          /><span style="vertical-align: middle">产能对比统计</span>
        </div>
        <div class="fuse-main" id="yield"></div>
      </div>
    </div>
    <el-dialog width="30%" title="编辑" :visible.sync="leaderShow">
      <el-form ref="FormDetails" :model="FormDetails" label-width="80px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="值班领导" prop="leaderName">
              <el-input
                v-model="FormDetails.leaderName"
                placeholder="请输入值班领导"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer" align="center">
        <el-button type="primary" @click="submitLeader">确 定</el-button>
        <el-button @click="closeLeader" type="button">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog width="50%" title="安全报警分析详情" :visible.sync="policeShow">
      <div style="padding-left: 40px">
        <span id="LayuiShowDateSpan" style="display: inline-block">
          <el-date-picker
            v-model="policeform.time"
            type="year"
            value-format="yyyy"
            placeholder="选择年"
            id="LayuiShowDate"
            v-if="this.policeform.timeType === '2'"
          >
          </el-date-picker>
          <el-date-picker
            v-model="policeform.time"
            type="month"
            value-format="yyyy-MM"
            placeholder="选择月份"
            id="LayuiShowDate"
            v-if="this.policeform.timeType === '3'"
          >
          </el-date-picker>
        </span>
        <el-select
          v-model="policeform.timeType"
          style="width: 100px; margin: 0 10px"
          @change="gettime"
        >
          <el-option value="2" label="年"></el-option>
          <el-option value="3" label="月"></el-option>
        </el-select>
        <el-button type="primary" @click="getPolice"
          ><i class="el-icon-search"></i
        ></el-button>
        <echarts :chartData="echartData.Police" style="height: 400px"></echarts>
      </div>
    </el-dialog>
    <el-dialog width="75%" title="井下人员详情" :visible.sync="personnumShow">
      <el-table :data="personData" height="500px" class="backtable">
        <el-table-column label="序号" width="100" align="center">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="psPersonCard"
          label="人员卡代码"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column prop="psPersonName" label="姓名" show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="psPersonDept"
          label="区队班组"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column prop="psPersonDuty" label="职务" show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="psMineEntertime"
          label="入井时刻"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="psAreaName"
          label="当前所处区域"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="psAreaEntertime"
          label="进入当前区域时刻"
          show-overflow-tooltip
          width="150"
        >
        </el-table-column>
        <el-table-column
          prop="psStationLocation"
          label="当前所处分站"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="psStationEntertime"
          label="进入当前分站时刻"
          show-overflow-tooltip
          width="150"
        >
        </el-table-column>
        <el-table-column
          prop="csDataTime"
          label="数据生成时间"
          show-overflow-tooltip
        >
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog width="75%" title="安全报警详情" :visible.sync="policelistShow">
      <el-table :data="policeData" height="600px" class="backtable">
        <el-table-column label="序号" width="100" align="center">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="ssTransducerPoint"
          label="监测点"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="ssTransducerValue"
          label="报警值"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="ssAlarmStime"
          label="报警时间"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="ssAlarmDuration"
          label="持续时长"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column prop="ssMaxValue" label="最大值" show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="ssMaxTime"
          label="最大值时间"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column prop="ssMinValue" label="最小值" show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="ssMinTime"
          label="最小值时间"
          show-overflow-tooltip
        >
        </el-table-column>
      </el-table>
    </el-dialog>
    <!-- <el-dialog width="75%" title="风险列表" :visible.sync="dangerShow">
      <el-form
        inline
        :model="dangerform"
        ref="dangerform"
        label-width="100px"
        size="mini"
      >
        <el-form-item label="风险等级" prop="riskLevel">
          <el-select
            v-model="dangerform.riskLevel"
            placeholder="请选择风险等级"
            style="width: 320px"
            filterable
          >
            <el-option label="请选择" value=""></el-option>
            <el-option label="低风险" value="1"></el-option>
            <el-option label="一般风险" value="2"></el-option>
            <el-option label="较大风险" value="3"></el-option>
            <el-option label="重大风险" value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-button
          type="primary"
          size="mini"
          icon="el-icon-search"
          @click="getdangerData"
        ></el-button>
      </el-form>
      <el-table :data="dangerData" height="450px" class="backtable">
        <el-table-column label="序号" width="50" align="center">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="identificationtype"
          label="辨识类型"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column prop="riskpoint" label="风险点" show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="riskobject"
          label="辨识对象"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="checkitem"
          label="检查项目"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="riskdescription"
          label="风险描述"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column prop="type" label="风险类型" show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="risklevelname"
          label="风险等级"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="updatetime"
          label="更新时间"
          show-overflow-tooltip
        >
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="config.page"
        :page-size="config.limit"
        layout="total,prev, pager, next, jumper"
        :total="total"
        style="text-align: right; margin-top: 10px"
      ></el-pagination>
    </el-dialog> -->
    <!-- <el-dialog width="75%" title="隐患列表" :visible.sync="troubleShow">
      <el-form
        inline
        :model="troubleform"
        ref="troubleform"
        label-width="100px"
        size="mini"
      >
        <el-form-item label="隐患类型" prop="paramType">
          <el-select
            v-model="troubleform.paramType"
            placeholder="请选择隐患类型"
            style="width: 320px"
            filterable
          >
            <el-option label="请选择" value=""></el-option>
            <el-option label="一般隐患" value="1"></el-option>
            <el-option label="重大隐患" value="2"></el-option>
            <el-option label="未闭环" value="3"></el-option>
            <el-option label="逾期隐患" value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-button
          type="primary"
          size="mini"
          icon="el-icon-search"
          @click="gettroubleData"
        ></el-button>
      </el-form>
      <el-table :data="troubleData" height="450px" class="backtable">
        <el-table-column label="序号" width="50" align="center">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="checktime"
          label="排查日期"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="checktype"
          label="排查类型"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column prop="hdaddress" label="风险点" show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="hddescription"
          label="问题描述"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column prop="hdtype" label="隐患类型" show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="speciality"
          label="隐患专业"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column prop="hdlevel" label="隐患等级" show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="hddepartment"
          label="责任单位"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column prop="hdstate" label="隐患状态" show-overflow-tooltip>
          <template slot-scope="scope">
            {{
              scope.row.hdstate == '0'
                ? '待下达'
                : scope.row.hdstate == '1'
                ? '待下达'
                : scope.row.hdstate == '2'
                ? '待整改'
                : scope.row.hdstate == '3'
                ? '待验收'
                : scope.row.hdstate == '4'
                ? '已验收'
                : '已验收'
            }}
          </template>
        </el-table-column>
        <el-table-column
          prop="updatetime"
          label="更新时间"
          show-overflow-tooltip
        >
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChanges"
        @current-change="handleCurrentChanges"
        :current-page="config1.page"
        :page-size="config1.limit"
        layout="total,prev, pager, next, jumper"
        :total="total1"
        style="text-align: right; margin-top: 10px"
      ></el-pagination>
    </el-dialog> -->
    <!-- <el-dialog width="75%" title="AI报警列表" :visible.sync="AIpoliceShow">
      <ai-police style="overflow: hidden; z-index: 3000"></ai-police>
    </el-dialog> -->
    <el-dialog
      width="40%"
      title="AI视频报警详情"
      :visible.sync="AIisShow"
      :append-to-body="true"
    >
      <el-divider content-position="left">视频截图</el-divider>
      <el-image
        style="width: 100%; height: 300px"
        :src="imgurl"
        fit="contain"
      ></el-image>
      <el-divider content-position="left">报警信息</el-divider>
      <p>{{ this.manage }}</p>
      <!-- <el-form ref="FormDetails" :model="FormDetails" label-width="80px"> </el-form> -->
    </el-dialog>
    <el-dialog
      width="75%"
      title="人员报警详情"
      :visible.sync="personpoliceShow"
    >
      <el-table :data="personpoliceData" height="450px" class="backtable">
        <el-table-column label="序号" width="100" align="center">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="psPersonCard"
          label="人员卡代码"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column prop="psPersonName" label="姓名" show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="psPersonDept"
          label="区队班组"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column prop="psPersonDuty" label="职务" show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="psMineEntertime"
          label="入井时刻"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="psAreaName"
          label="当前所处区域"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="psAreaEntertime"
          label="进入当前区域时刻"
          width="140"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="psStationLocation"
          label="当前所处分站"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="psStationEntertime"
          label="进入当前分站时刻"
          show-overflow-tooltip
          width="140"
        >
        </el-table-column>
        <el-table-column
          prop="psAlarmType"
          label="报警类型"
          show-overflow-tooltip
        >
        </el-table-column>
      </el-table>
      <el-divider content-position="left">求救报警统计</el-divider>
      <el-table
        :data="qiujiuData"
        height="200px"
        class="backtable"
        style="margin-top: 20px"
      >
        <el-table-column label="序号" width="100" align="center">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="psPersonCard"
          label="人员卡代码"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column prop="psPersonName" label="姓名" show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="psAreaName"
          label="当前所处区域"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="psAreaEntertime"
          label="进入当前区域时刻"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="psStationName"
          label="当前所处分站"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="psStationEntertime"
          label="进入当前分站时刻"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="psAlarmStime"
          label="报警开始时间"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="psAlarmEtime"
          label="报警结束时间"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="csDataTime"
          label="数据生成时间"
          show-overflow-tooltip
        >
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog width="75%" title="人员报警详情" :visible.sync="staffAlarmShow">
      <el-table :data="staffAlarmData" height="450px" class="backtable">
        <el-table-column label="序号" width="100" align="center">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="psPersonCard"
          label="人员卡代码"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column prop="psPersonName" label="姓名" show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="psPersonDept"
          label="区队班组"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column prop="psPersonDuty" label="职务" show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="psMineEntertime"
          label="入井时刻"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="psAreaName"
          label="当前所处区域"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="psAreaEntertime"
          label="进入当前区域时刻"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="psStationLocation"
          label="当前所处分站"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="psStationEntertime"
          label="进入当前分站时刻"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="csDataTime"
          label="数据生成时间"
          show-overflow-tooltip
        >
        </el-table-column>
      </el-table>
    </el-dialog>
    
    <el-dialog width="75%" title="带班领导详情" :visible.sync="leaderShow">
      <el-table :data="leaderData" height="600px" class="backtable">
        <el-table-column label="序号" width="100" align="center">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="psPersonCard"
          label="人员卡代码"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column prop="psPersonName" label="姓名" show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="psPersonDept"
          label="区队班组"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column prop="psPersonDuty" label="职务" show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="psMineEntertime"
          label="入井时刻"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="psAreaName"
          label="当前所处区域"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="psAreaEntertime"
          label="进入当前区域时刻"
          show-overflow-tooltip
          width="150"
        >
        </el-table-column>
        <el-table-column
          prop="psStationLocation"
          label="当前所处分站"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="psStationEntertime"
          label="进入当前分站时刻"
          show-overflow-tooltip
          width="150"
        >
        </el-table-column>
        <el-table-column
          prop="csDataTime"
          label="数据生成时间"
          show-overflow-tooltip
        >
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import EchartsPanel from "@/components/EchartsPanel/index.vue";
import Echarts from "@/components/Echarts/index.vue";
import DispatchDetail from "./DispatchDetail";
// import AiPolice from '@/views/Deploy/AreaManage/AIPolice'
import { WebScoket } from "@/api/websocket.js";
import {listurl} from '@/api/security/historicalalarm.js'

import * as echarts from "echarts";
export default {
  mixins: [WebScoket],
  components: {
    EchartsPanel,
    Echarts,
    DispatchDetail
    // AiPolice
  },
  computed: {
    classOption() {
      return {
        step: 0.5, // 数值越大速度滚动越快
        limitMoveNum: 6, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        // openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      };
    }
  },
  mounted: function() {
    this.webValue = "/net/websocket/safeResult/" + this.uuid;
    this.initWebSocket();
    this.webValue1 = "/net/websocket/personResult/" + this.uuid;
    this.initWebSocket1();
    // this.webValue2 = '/net/websocket/personResult/' + this.uuid
    // this.initWebSocket2()
    this.webValue3 = "/net/websocket/alarmResult/";
    this.initWebSocket3();
    var that = this;
    this.$bus.$on("isAlarm", res => {
      that.transfer();
    });
  },
  destroyed() {
    this.websock.close(); // 离开路由之后断开websocket连接
    this.websock1.close(); // 离开路由之后断开websocket连接
    // this.websock2.close() //离开路由之后断开websocket连接
    this.websock3.close(); // 离开路由之后断开websocket连接
  },
  data() {
    return {
      listData: [],
      staffData: [],
      wasiAlarmList:[],
      activeName: "first",
      isShow: false,
      uuid: null,
      leaderShow: false,
      policeShow: false,
      personnumShow: false,
      policelistShow: false,
      dangerShow: false,
      troubleShow: false,
      AIpoliceShow: false,
      leaderShow:false,
      leaderData:[],
      dangerform: {
        riskLevel: null
      },
      troubleform: {
        paramType: null
      },
      echartData: {
        Safe: {
          xData: [],
          series: []
        },
        Police: {
          xData: [],
          series: []
        }
      },
      policeform: {
        time: null,
        timeType: "2"
      },
      Img: {
        backgroundImage: "url(" + require("@/assets/images/img13.png") + ")",
        backgroundRepeat: "no-repeat",
        backgroundSize: "100% 100%"
      },
      num: 0,
      CompositeData: {
        classLeader: null,
        dutyLeader: null,
        personnum: null,
        alarmNum: null,
        lastDayAlarmNum: null,
        allAlarmNum: null,
        autoNum: null,
        lastDayAutoNum: null,
        allAutoNum: null,
        hdCount2: null,
        hdCount1: null,
        hdCountAll: null,
        aiTotal: null,
        aiYesterdayCount: null,
        aiNowCount: null,
        srCountAll: null,
        srCountLevel1: null,
        srCountLevel2: null,
        srCountLevel3: null,
        srCountLevel4: null,
        clAlarmNum: null,
        lastDayClAlarmNum: null,
        allClAlarmNum: null
      },
      FormDetails: {
        leaderName: null
      },
      riskLevel: {
        name: null,
        value: null
      },
      config1: {
        page: 1,
        limit: 10
      },
      total1: 0,
      riskLevelList: [],
      personData: [],
      policeData: [],
      dangerData: [],
      troubleData: [],
      websocketData: [],
      websocketData1: [],
      websocketData2: [],
      websocketData3: [],
      AIpoliceData: [],
      dutyData: [],
      AIUrl: null,
      AIisShow: false,
      imgurl: null,
      manage: null,
      safepolice: false,
      ssSafeCode: {
        ssStationCode: null,
        ssTransducerCode: null
      },
      personpoliceShow: false,
      personpoliceData: [],
      qiujiuData: [],
      staffAlarmData: [],
      staffAlarmShow: false,
      transferlist: {},
      linkage: "",
      linkageShow: false,
      linkageShow1: false
      // ambient: [],
    };
  },
  methods: {
    tapleader(){
      this.leaderShow = true
      this.$http
        .get("/home/leader?pageNum=1&pageSize=10")
        .then(res => {
          if (res.code === 200) {
            this.leaderData = res.data
          }
        });
    },
    getrenyuan(){
      this.$router.push({ name: 'Personnel' })
      this.$store.commit('settitlename', '人员监测')
    },
     getsafe(){
      this.$router.push({ name: 'Safe' })
      this.$store.commit('settitlename', '安全监测')
    },
     getYield(){
      this.$router.push({ name: 'Yield' })
      this.$store.commit('settitlename', '产量监测')
    },
     getvideo(){
      this.$router.push({ name: 'VideoList' })
      this.$store.commit('settitlename', '视频监控')
    },
    // 安全报警
    websocketonmessage(e) {
      this.websocketData = JSON.parse(e.data);
      for (var item of this.websocketData) {
        if (item.inOutType == "1" && item.ssTransducerState == "3") {
          this.num += 1;
        } else if (
          (item.inOutType == "2" && item.ssTransducerState == "3") ||
          item.ssTransducerState == "4"
        ) {
          this.num += 1;
        }
      }
      this.CompositeData.alarmNum = this.num;
    },
    // 人员
    websocketonmessage1(e) {
      this.websocketData1 = JSON.parse(e.data);
      this.personData = this.websocketData1;
      const length = this.websocketData1.length;
      this.CompositeData.personnum = length;
    },
    // Ai
    // websocketonmessage2(e) {
    //   this.websocketData2 = JSON.parse(e.data)
    //   this.open2(
    //     this.websocketData2.wName,
    //     this.websocketData2.wTime,
    //     this.websocketData2.id
    //   )
    // },
    // 公共页面安全
    websocketonmessage3(e) {
      this.websocketData3 = JSON.parse(e.data);
      console.log(this.websocketData3);
      this.open3(
        this.websocketData3[0].ssTransducerPoint,
        this.websocketData3[0].ssTransducerTypeName,
        this.websocketData3[0].ssTransducerValue,
        this.websocketData3[0].id,
        this.websocketData3[0].ssStationCode,
        this.websocketData3[0].ssTransducerCode
      );
    },

    open2(name, time, id) {
      const that = this;
      this.$notify({
        title: "AI视频报警",
        message:
          name +
          "正在报警：有人员进入限制区域，报警时间:" +
          time +
          ",请立即处理!",
        position: "bottom-right",
        duration: 0,
        type: "warning",
        onClick() {
          that.AIvideopolice(id);
          this.close();
        }
      });
    },
    AIvideopolice(id) {
      this.$http
        .post("/xbtPivas/list?pageNum=1&pageSize=10", { pivasKey: "aimanage" })
        .then(res => {
          res = res.data;
          if (res.code === 200) {
            this.AIUrl =
              "http://" + res.data[0].pivasIpurl + ":" + res.data[0].pivasPort;
            this.$http
              .get(this.AIUrl + "/hdc/history/detail?id=" + id)
              .then(res => {
                res = res.data;
                if (res.code === 200) {
                  this.imgurl = this.AIUrl + "/show/" + res.data.wFile;
                  this.manage =
                    res.data.wDate + " 有人进入限制区域:" + res.data.wArea;
                  this.AIisShow = true;
                }
              });
          }
        });
    },
    open3(
      ssTransducerPoint,
      ssTransducerTypeName,
      ssTransducerValue,
      id,
      ssStationCode,
      ssTransducerCode
    ) {
      this.$store.commit("clearstationCode");
      this.$store.commit("clearsensorCode");
      const that = this;
      this.$notify({
        title: "安全应急联动",
        message:
          ssTransducerPoint +
          "正在报警,传感器类型:" +
          ssTransducerTypeName +
          ",报警值:" +
          ssTransducerValue +
          ",请立即处理!",
        position: "bottom-right",
        duration: 0,
        type: "warning",
        onClick() {
          that.SafePolice(id);
          this.close();
        }
      });
      this.$store.commit("setPrint", {
        stationCode: ssStationCode,
        sensorCode: ssTransducerCode,
        isAlert: "true"
      });
      this.$store.commit("setstationCode", ssStationCode);
      this.$store.commit("setsensorCode", ssTransducerCode);
    },
    SafePolice(id) {
      this.$router.push({
        name: "SafePolice",
        params: {
          alarmId: id
        }
      });
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    gettime() {
      this.policeform.time = null;
    },
    // getambient() {
    //   this.$http.get("/home/environmental").then(res => {
    //     if (res.code === 200) {
    //       this.ambient = res.data;
    //     }
    //   });
    // },
    getcneng() {
      this.$http.get("home/yieldMonitoring").then(res => {
        if (res.code == 200) {
          // 产量分析
          var mychartair = echarts.init(document.getElementById("yield"));
          var option = {
            grid: {
              top: "45px",
              bottom: "10%",
              left: "12%",
              right: "12%"
            },
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "shadow",
                label: {
                  show: true
                }
              }
            },
            legend: {
              top: "10px",
              textStyle: {
                color: "#ffffff"
              }
            },
            xAxis: {
              data: res.data.date,
              axisLine: {
                show: true,
                lineStyle: {
                  color: "#01FCE3"
                }
              },
              axisTick: {
                show: true
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: "#4fcdff"
                }
              }
            },
            yAxis: [
              {
                type: "value",
                name: "吨",
                nameTextStyle: {
                  color: "#ebf8ac"
                },
                splitLine: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                axisLine: {
                  show: false,
                  lineStyle: {
                    color: "#FFFFFF"
                  }
                },
                axisLabel: {
                  show: true,
                  textStyle: {
                    color: "#4fcdff"
                  }
                }
              },
              {
                type: "value",
                name: "同比",
                nameTextStyle: {
                  color: "#ebf8ac"
                },
                position: "right",
                splitLine: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                axisLine: {
                  show: false
                },
                axisLabel: {
                  show: true,
                  formatter: "{value} %", // 右侧Y轴文字显示
                  textStyle: {
                    color: "#4fcdff"
                  }
                }
              },
              {
                type: "value",
                gridIndex: 0,
                min: 50,
                max: 100,
                splitNumber: 8,
                splitLine: {
                  show: false
                },
                axisLine: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                axisLabel: {
                  show: false
                },
                splitArea: {
                  show: true,
                  areaStyle: {
                    color: ["rgba(250,250,250,0.0)", "rgba(250,250,250,0.05)"]
                  }
                }
              }
            ],
            series: [
              {
                name: "产量",
                type: "line",
                yAxisIndex: 1,
                smooth: true,
                showAllSymbol: true,
                symbol: "circle",
                symbolSize: 8,
                itemStyle: {
                  color: "#058cff"
                },
                lineStyle: {
                  color: "#058cff"
                },
                areaStyle: {
                  color: "rgba(5,140,255, 0.2)"
                },
                data: res.data.outputDaylist
              },
              {
                name: "产能比",
                type: "bar",
                barWidth: 15,
                itemStyle: {
                  normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0,
                        color: "#00FFE3"
                      },
                      {
                        offset: 1,
                        color: "#4693EC"
                      }
                    ])
                  }
                },
                data: res.data.ratioDaylist
              }
            ]
          };
          mychartair.clear();
          mychartair.setOption(option, true);
          mychartair.resize();
        }
      });
    },
    getCompositeData() {
      this.$http.get("/home/compositeData").then(res => {
        if (res.code === 200) {
          this.uuid = res.data.uuid;
          this.CompositeData = res.data;
          this.riskLevel = res.data.riskLevelMap;
          this.riskLevelList.push(this.riskLevel);
          this.dutyData = res.data.leaderList;
          this.echartData.Safe.xData = res.data.sevenDaysAlarm.time;
          this.echartData.Safe.series.push(
            {
              name: "CO",
              type: "line",
              symbol: "circle",
              symbolSize: 8,
              itemStyle: {
                normal: {
                  color: "#0092f6",
                  lineStyle: {
                    color: "#0092f6",
                    width: 1
                  },
                  areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                      {
                        offset: 0,
                        color: "rgba(7,44,90,0.3)"
                      },
                      {
                        offset: 1,
                        color: "rgba(0,146,246,0.9)"
                      }
                    ])
                  }
                }
              },
              markPoint: {
                itemStyle: {
                  normal: {
                    color: "red"
                  }
                }
              },
              data: res.data.sevenDaysAlarm.CO
            },
            {
              name: "CH4",
              type: "line",
              symbol: "circle",
              symbolSize: 8,

              itemStyle: {
                normal: {
                  color: "#00d4c7",
                  lineStyle: {
                    color: "#00d4c7",
                    width: 1
                  },
                  areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                      {
                        offset: 0,
                        color: "rgba(7,44,90,0.3)"
                      },
                      {
                        offset: 1,
                        color: "rgba(0,212,199,0.9)"
                      }
                    ])
                  }
                }
              },
              data: res.data.sevenDaysAlarm.CH4
            }
          );
        }
      });
    },
    addleader() {
      this.leaderShow = true;
    },
    submitLeader() {
      this.$http.post("/fusion/leader/add", this.FormDetails).then(response => {
        if (response.code === 200) {
          this.CompositeData.dutyLeader = response.msg;
          this.leaderShow = false;
        }
      });
    },
    closeLeader() {
      this.leaderShow = false;
    },
    getpoliceDetail() {
      this.policeShow = true;
    },
    getPolice() {
      this.echartData.Police.xData = [];
      this.echartData.Police.series = [];
      this.$http
        .get("/home/safeHistoryAlarmDetailList?dateStr=" + this.policeform.time)
        .then(res => {
          if (res.code === 200) {
            // 安全报警信息
            this.echartData.Police.xData = res.data.timeList;
            this.echartData.Police.series.push(
              {
                name: "CO",
                type: "line",
                symbol: "circle",
                symbolSize: 8,
                itemStyle: {
                  normal: {
                    color: "#0092f6",
                    lineStyle: {
                      color: "#0092f6",
                      width: 1
                    },
                    areaStyle: {
                      // color: '#94C9EC'
                      color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                        {
                          offset: 0,
                          color: "rgba(7,44,90,0.3)"
                        },
                        {
                          offset: 1,
                          color: "rgba(0,146,246,0.9)"
                        }
                      ])
                    }
                  }
                },
                markPoint: {
                  itemStyle: {
                    normal: {
                      color: "red"
                    }
                  }
                },
                data: res.data.valsCO
              },
              {
                name: "CH4",
                type: "line",
                symbol: "circle",
                symbolSize: 8,

                itemStyle: {
                  normal: {
                    color: "#00d4c7",
                    lineStyle: {
                      color: "#00d4c7",
                      width: 1
                    },
                    areaStyle: {
                      // color: '#94C9EC'
                      color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                        {
                          offset: 0,
                          color: "rgba(7,44,90,0.3)"
                        },
                        {
                          offset: 1,
                          color: "rgba(0,212,199,0.9)"
                        }
                      ])
                    }
                  }
                },
                data: res.data.valsCH4
              }
            );
          }
        });
    },
    personnumList() {
      this.personnumShow = true;
      this.$http
        .get("/staff/staffRealResult/list?pageNum=1&pageSize=10000")
        .then(res => {
          // res = res.data
          if (res.code === 200) {
            this.personData = res.rows;
            // this.personData = this.websocketData1
          }
        });
    },
    lastDayAlarm() {
      this.policeData = [];
      this.policelistShow = true;
      this.$http
        .get("/home/safeHistoryAlarmByType?pageNum=1&pageSize=10000&type=1")
        .then(res => {
          if (res.code === 200) {
            this.policeData = res.data.data;
          }
        });
    },
    allAlarm() {
      this.policeData = [];
      this.policelistShow = true;
      this.$http
        .get("/home/safeHistoryAlarmByType?pageNum=1&pageSize=10000&type=2")
        .then(res => {
          if (res.code === 200) {
            this.policeData = res.data.data;
          }
        });
    },
    SafeRealAlarm() {
      this.policeData = [];
      this.policelistShow = true;
      this.$http
        .get(
          "/SafeRealAlarm/SafeRealAlarm/list?pageNum=1&pageSize=10000&type=2"
        )
        .then(res => {
          if (res.code === 200) {
            this.policeData = res.rows;
          }
        });
    },
    personpolice() {
      this.personpoliceData = [];
      this.qiujiuData = [];
      this.personpoliceShow = true;
      this.$http.get("/home/staffAlarm").then(res => {
        if (res.code === 200) {
          this.personpoliceData = res.data.alarm;
          this.qiujiuData = res.data.help;
        }
      });
    },
    lastDayPsAlarm() {
      this.personpoliceData = [];
      this.qiujiuData = [];
      this.personpoliceShow = true;
      this.$http
        .get("/home/staffHistoryAlarmByType?pageNum=1&pageSize=10000&type=1")
        .then(res => {
          if (res.code == 200) {
            this.personpoliceData = res.data.alarm;
            this.qiujiuData = res.data.help;
          }
        });
    },
    allPsAlarm() {
      this.personpoliceData = [];
      this.qiujiuData = [];
      this.personpoliceShow = true;
      this.$http
        .get("/home/staffHistoryAlarmByType?pageNum=1&pageSize=10000&type=2")
        .then(res => {
          if (res.code == 200) {
            this.personpoliceData = res.data.alarm;
            this.qiujiuData = res.data.help;
          }
        });
    },
    staffAlarm(type) {
      this.staffAlarmData = [];
      this.staffAlarmShow = true;
      this.$http.get("/home/staffAlarmByType?type=" + type).then(res => {
        if (res.code == 200) {
          this.staffAlarmData = res.data;
        }
      });
    },
    getdangerData() {
      this.$http
        .get(
          "/syk/riskListTable?curPage=" +
            this.config.page +
            "&pageSize=" +
            this.config.limit +
            "&riskLevel=" +
            this.dangerform.riskLevel
        )
        .then(res => {
          res = res.data;
          if (res.code === 200) {
            this.total = res.data.page.totalResultSize;
            this.dangerData = res.data.list;
          }
        });
    },
    troubleList() {},
    gettroubleData() {
      this.$http
        .get(
          "/syk/hdListTable?curPage=" +
            this.config1.page +
            "&pageSize=" +
            this.config1.limit +
            "&paramType=" +
            this.troubleform.paramType
        )
        .then(res => {
          res = res.data;
          if (res.code === 200) {
            this.total1 = res.data.page.totalResultSize;
            this.troubleData = res.data.list;
          }
        });
    },
    // 分页
    handleSizeChange(limit) {
      this.config.limit = limit;
      this.getdangerData();
    },
    handleCurrentChange(page) {
      this.config.page = page;
      this.getdangerData();
    },
    handleSizeChanges(limit) {
      this.config1.limit = limit;
      this.gettroubleData();
    },
    handleCurrentChanges(page) {
      this.config1.page = page;
      this.gettroubleData();
    },
    AIpoliceList() {
      this.$message("暂未接入该系统");
      // this.AIpoliceShow = true
    },
    transfer() {
      this.$http.get("/SysBigData/SysBigData/transferState").then(res => {
        if (res.code === 200) {
          this.transferlist = res.data;
        }
      });
    },
    getlistData() {
      this.$http.get("/home/realAlarmData").then(res => {
        if (res.code == 200) {
          this.listData = res.data.safeAlarmList;
          this.staffData = res.data.staffAlarmList;
          this.wasiAlarmList = res.data.wasiAlarmList
        }
      });
    },
    getdetail(item) {
      this.linkageShow = true;
      var code = item.ssTransducerCode;
      var name = item.alarmDetail;
      var codelist={
        ssTransducerCode:''
      }
      codelist.ssTransducerCode = code
      // this.$http
      //   .get("/safeStaffRelation/relation/info?ssTransducerCode=" + code)
      listurl(codelist) .then(res => {
          if (res.code == 200) {
            if(res.data.detail!=''){
            this.linkage =
              name +
              "," +
              "报警值为" +
              res.data.info.ssTransducerValue +
              res.data.info.company +
              "," +
              res.data.detail;
            }else{
              this.linkage =
              name +
              "," +
              "报警值为" +
              res.data.info.ssTransducerValue +
              res.data.info.company +
              "," +
              '其未关联人员分站。';
            }
            
            console.log(2222, this.linkage);
          }
        });
    },
    
    getdetail1(item) {
      this.linkageShow1 = true;
      var code = item.ssTransducerValue;
      var name = item.ssTransducerPoint;
            this.linkage =
              name +
              "预警," +
              "预警值为" +
              code +
              "%。" 
    },
    gethidden(){
      this.linkageShow = false
    },
    gethidden1(){
      this.linkageShow1 = false
    }
  },
  created() {
    this.getCompositeData();
    // this.getambient();
    this.getcneng();
    this.transfer();
    this.getlistData();
  }
};
</script>

<style lang="scss" scoped>
::v-deep .el-dialog {
  background: url("../../../assets/img/dialogback.png") no-repeat !important;
  background-size: 100% 100% !important;
  padding: 0.2rem 0.4rem 0.3rem !important;
}
::v-deep .el-dialog__title {
  color: #fff !important;
}
.el-divider__text {
  position: absolute;
  background-color: rgb(11 14 36);
  padding: 0 20px;
  font-weight: 500;
  color: #ffffff;
  font-size: 16px;
}
.el-divider {
  background-color: #4d6cb5;
  position: relative;
}
::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: rgba(6, 26, 57, 0.8) !important;
}
.fuse-left_person {
  box-sizing: border-box;
  padding: 0 0.1rem;
  li {
    border-top: 1px dashed #15507a;
    p {
      font-size: 0.16rem;
      line-height: 0.3rem;
      height: 0.3rem;
      display: flex;
      span:nth-child(1) {
        width: 40%;
        display: inline-block;
        text-align: justify;
        text-justify: distribute-all-lines; // 这行必加，兼容ie浏览器
        text-align-last: justify;
      }
      span:nth-child(2) {
        flex: 1;
        text-align: center;
        color: rgb(4, 222, 255);
      }
      span:nth-child(3) {
        flex: 1;
        text-align: center;
        color: rgb(4, 222, 255);
      }
    }
  }
}
.fuse-left-side_person {
  img {
    width: 0.5rem;
    vertical-align: middle;
  }
  span {
    vertical-align: bottom;
  }
  span:nth-child(2) {
    width: 1rem !important;
    margin-left: 0.1rem;
  }
  li:nth-child(1) {
    span:nth-child(3) {
      color: #48ece7;
    }
  }
  li:nth-child(2) {
    span:nth-child(3) {
      color: #459ef8;
    }
  }
}
.fuse .fuse-census > li p span:nth-child(2) {
  color: #fff;
}
.fuse .fuse-census > li ol {
  margin-top: 0.15rem;
}
.transfer {
  width: 95%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  li {
    width: 100%;

    dl {
      display: flex;
      width: 100%;
      box-sizing: border-box;
      padding: 0.1rem 0.3rem 0.12rem 0.7rem;
      dt {
        width: 35%;
        text-align: center;
        p {
          color: #fff;
          font-size: 0.14rem;
          line-height: 0.2rem;
        }
        h1 {
          color: #00a6ff;
          font-size: 0.18rem;
          font-weight: 600;
          line-height: 0.3rem;
        }
      }
      dd {
        flex: 1;
        text-align: center;
        h2 {
          color: #00bfff;
          margin-top: 0.17rem;
          font-size: 0.16rem;
        }
      }
    }
  }
  li:nth-child(1) {
    background: url(../../../assets/images/img72.png) no-repeat;
    background-size: 100% 100%;
  }
  li:nth-child(2) {
    background: url(../../../assets/images/img74.png) no-repeat;
    background-size: 100% 100%;
    margin: 0.05rem 0;
  }
  li:nth-child(3) {
    background: url(../../../assets/images/img73.png) no-repeat;
    background-size: 100% 100%;
  }
}
.isred {
  color: red !important;
}
.isgroundred {
  background: red !important;
}
.isgreen {
  color: #1afa29 !important;
}
.isgroundgreen {
  background: #1afa29 !important;
}
.transferlist {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
  overflow: auto;
  li {
    width: calc(33% - 20px);
    height: 93px;
    margin: 10px;
    background: rgba(85, 125, 171, 0.5);
    text-align: center;
    color: #636363;
    p {
      line-height: 26px;
      span:nth-child(1) {
        display: inline-block;
        width: 12px;
        height: 12px;
        background: #636363;
        border-radius: 50%;
        margin-right: 5px;
      }
      span:nth-child(2) {
        line-height: 12px;
      }
    }
    i {
      font-size: 30px;
      font-weight: 600;
      display: inline-block;
      margin: 8px 0;
    }
  }
}
.el-tabs {
  padding: 0 15px;
  height: 100%;
}
.seamless-warp {
  height: 100%;
  overflow: hidden;
}
.item {
  li {
    height: 30px;
    line-height: 30px;
    display: flex;
    position: relative;

    span:nth-child(1) {
      width: 45%;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
    span:nth-child(2) {
      flex: 1;
      text-align: right;
    }
    span:nth-child(3) {
      width: 15%;
      text-align: center;
      cursor: pointer;
      display: inline-block;
      color: #00bfff;
    }
  }
}
.linkage {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background: rgb(65, 90, 119);
  z-index: 20;
  box-sizing: border-box;
  padding:10px 20px;
  span{
    display: inline-block;
    line-height: 25px;
    font-size: 14px;
    text-indent: 30px;
    width:100%;
    -webkit-line-clamp: 5;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  i{
    position: absolute;
    right:6px;
    top:6px;
    font-size: 18px;
    cursor: pointer;
  }
}
</style>
<style lang="scss">
.el-tabs__item {
  color: #fff;
}
.el-tabs__content {
  height: 70%;
}
.el-tab-pane {
  height: 100%;
}
</style>
